<template>
  <div class="app">
    <!-- 导航栏 -->

    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white bg-opacity-90 shadow-md z-50">
      <div class="container mx-auto px-6 py-3 flex justify-between items-center">
        <div class="text-xl font-bold text-gray-800">宁德师范学院信息工程学院</div>
        <div class="space-x-4">
          <!-- 修改为 <router-link> 标签 -->
          <router-link to="/login" class="text-blue-600 hover:text-blue-800 font-semibold">教师登录</router-link>
          <a href="http://8.134.39.197:9059" class="text-green-600 hover:text-green-800 font-semibold">管理员登录</a>
        </div>
      </div>
    </nav>


    <!-- Hero部分 -->
    <section class="relative h-screen flex items-center justify-center overflow-hidden">

      <div class="absolute w-full h-full bg-cover bg-center bg-no-repeat"
           :style="{ transform: `translateY(${scrollY * 0.5}px)`, backgroundImage: `url('/assets/img.png')` }">
      </div>

      <div class="relative z-10 text-center text-white">
        <h1 class="text-5xl font-bold mb-4">信息工程学院教科研管理系统</h1>
        <p class="text-xl mb-8">创新、卓越、共享</p>
      </div>
    </section>


    <!-- 关于平台 -->
    <section class="py-16 bg-gray-100">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-semibold text-center text-gray-800 mb-8">关于我们的平台</h2>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/3 px-4 mb-8">
            <div class="bg-white rounded-lg shadow-lg p-6 h-full">
              <h3 class="text-xl font-semibold mb-4">创新管理</h3>
              <p class="text-gray-600">我们的平台提供先进的创新管理工具，帮助研究人员更好地组织和展示他们的成果。</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 px-4 mb-8">
            <div class="bg-white rounded-lg shadow-lg p-6 h-full">
              <h3 class="text-xl font-semibold mb-4">成果展示</h3>
              <p class="text-gray-600">通过直观的界面，我们展示工程院的各项成果，让更多人了解我们的研究进展。</p>
            </div>
          </div>
          <div class="w-full md:w-1/3 px-4 mb-8">
            <div class="bg-white rounded-lg shadow-lg p-6 h-full">
              <h3 class="text-xl font-semibold mb-4">资源共享</h3>
              <p class="text-gray-600">促进学院内部以及与其他机构的资源共享，推动协作研究和创新。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成果展示 -->
    <section class="py-16">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-semibold text-center text-gray-800 mb-8">最新成果展示</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div v-for="(achievement, index) in achievements" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden">
            <img :src="achievement.image" :alt="achievement.title" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-2">{{ achievement.title }}</h3>
              <p class="text-gray-600 mb-4">{{ achievement.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻公告 -->
    <section class="py-16 bg-gray-100">
      <div class="container mx-auto px-6">
        <h2 class="text-3xl font-semibold text-center text-gray-800 mb-8">新闻与公告</h2>

        <!-- 加载状态 -->
        <div v-if="noticesLoading" class="text-center py-8">
          <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em]" role="status">
            <span class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">加载中...</span>
          </div>
          <p class="mt-2 text-gray-600">正在加载公告...</p>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="noticesError" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
          <strong class="font-bold">错误！</strong>
          <span class="block sm:inline"> {{ noticesError }}</span>
        </div>

        <!-- 数据展示 -->
        <div v-else class="space-y-6">
          <div v-if="notices.length > 0">
            <div v-for="notice in notices" :key="notice.noticeId" class="bg-white rounded-lg shadow-lg p-6">
              <h3 class="text-xl font-semibold mb-2">{{ notice.noticeTitle }}</h3>
              <p class="text-gray-600 mb-4">{{ notice.noticeContent }}</p>
            </div>
          </div>
          <div v-else class="text-center py-8">
            <p class="text-gray-600">暂无公告</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-8">
      <div class="container mx-auto px-6">
        <div class="flex flex-wrap justify-between">
          <div class="w-full md:w-1/2 mb-6 md:mb-0">
            <h3 class="text-lg font-semibold mb-2">联系我们</h3>
            <p>地址：福建省宁德市东侨经济开发区学院路1号</p>
            <p>电话：0593-2960000</p>
            <p>邮箱：info@ndnu.edu.cn</p>
          </div>
          <div class="w-full md:w-1/2">
            <h3 class="text-lg font-semibold mb-2">关注我们</h3>
            <div class="flex space-x-4">
              <a href="#" class="text-2xl hover:text-gray-300">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" class="text-2xl hover:text-gray-300">
                <i class="fab fa-weibo"></i>
              </a>
              <a href="#" class="text-2xl hover:text-gray-300">
                <i class="fab fa-qq"></i>
              </a>
            </div>
          </div>
        </div>
        <div class="mt-8 text-center text-sm">
          <p>&copy; 2025 宁德师范学院信息工程学院. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Notice } from '@/api/home.js';

const scrollY = ref(0);

const handleScroll = () => {
  scrollY.value = window.scrollY;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  fetchNotices();
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});

const achievements = [
  {
    title: '简单机器人设计',
    description: '学生们设计了一个可以行走的小机器人，展示了基本的机械原理。',
    image: '/assets/img_1.png'
  },
  {
    title: '环保材料实验',
    description: '研究了一种用废弃物制作的新型环保材料，具有基本的实用性。',
    image: '/assets/img_2.png'
  },
  {
    title: '学习APP开发',
    description: '开发了一款简单的学习应用，帮助同学们更好地复习课程知识。',
    image: '/assets/img_3.png'
  }
];


// 公告数据
const notices = ref([]);
const noticesLoading = ref(true);
const noticesError = ref(null);

// 获取公告数据
const fetchNotices = async () => {
  // 设置加载状态为 true
  noticesLoading.value = true;

  try {
    // 调用后端接口获取公告数据
    const response = await Notice();
  console.log("response",response)
    // 确保从后端获取的数据是一个列表数组
    if (Array.isArray(response)) {
      // 将获取到的公告数据赋值给 notices
      notices.value = response;
    } else {
      // 如果返回的数据不是数组，可能是一个错误或异常，可以处理这个情况
      console.error('返回的数据格式错误，期望的是一个数组');
      notices.value = []; // 设置为空数组
    }
  } catch (error) {
    // 如果请求失败，打印错误信息并处理加载状态
    console.error('获取公告数据失败:', error);
    notices.value = []; // 设置为空数组
  } finally {
    // 请求完成后，无论成功与否，都设置加载状态为 false
    noticesLoading.value = false;
  }
};

</script>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';

html {
  scroll-behavior: smooth;
}

.app {
  font-family: 'Helvetica', 'Arial', sans-serif;
}
</style>
